<template>
	<view class="history" v-if="historyList.length">
		<view class="history__header">
			<view class="header__item">{{$t('search.his')}}</view>
			<view class="header__item" @click="isShowDelete=true" v-if="!isShowDelete">
				 <text class="item__text">{{$t('search.del')}}</text>
				 <uni-icons type="trash-filled" color="#999" size="20" class="item__delete"></uni-icons>
			</view>
			<view class="header__item" v-else>
				<text class="item__text" @click="deleteClick">{{$t('search.delAll')}}</text>
				<text class="item__line"></text>
				<text class="item__text" @click="isShowDelete=false">{{$t('search.done')}}</text>
			</view>
		</view>
		<view class="history__list">
			<view :class="['list__item', isShowDelete?'list__item--selected':'']" v-for="(item , index) in historyList" :key="index">
				<image src="@/static/icons/history_icon.png" mode="widthFix" class="item__icon"></image>
				<text class="item__title" @click="itemClick(item)">{{item}}</text>
				<image src="@/static/icons/close_icon.png" mode="widthFix" class="item__close" 
				v-if="isShowDelete" @click="closeClick(index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				isShowDelete: false,
			}
		},
		props:{
			historyList:{
				type:Array,
				default:()=>([])
			}
		},
		methods:{
			// 刪除點擊
			deleteClick(){
				let tips =  this.$t("search.delTips")
				uni.showModal({
					title:this.$t("modal.title"),
					content:tips,
					success:({confirm})=> {
						this.isShowDelete = false
						if(confirm){
							this.$emit("deleteHandle", -1)
						}
					}
				})
			},
			//選項點擊
			itemClick(item){
				if(this.isShowDelete)return
				this.$emit("searchHandle", item)
			},
			// 刪除當前選中值
			closeClick(index){
				this.$emit("deleteHandle", index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history{
		margin-top: 30rpx;
		&__header{
			@include flexRowAlign(space-between);
			height: 64rpx;
			.header__item{
				@include flexRowAlign();
				font-size: 26rpx;
				color: #999999;
				.item__text{}
				.item__delete{
					margin-left: 4rpx;
				}
				.item__line{
					width: 2rpx;
					height: 24rpx;
					background: #999999;
					margin: 0 30rpx;
				}
			}
		}
		&__list{
			margin-top: 20rpx;
			border-top: 1rpx solid #EEEEEE;
			@include flexRowAlign(space-between);
			flex-wrap: wrap;
			.list__item{
				height: 88rpx;
				width: 335rpx;
				flex-grow: 0;
				@include flexRowAlign();
				
				border-radius: 6rpx;
				margin-bottom:20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.item__icon{
					width: 32rpx;
					height: 32rpx;
				}
				.item__title{
					font-size: 32rpx;
					color:#fff;
					margin-left: 12rpx;
					width: 200rpx;
					@include textOver();
				}
				.item__close{
					width: 22rpx;
					height: 22rpx;
					margin-left: 16rpx;
				}
			}
			.list__item--selected{
				background: #FFFFFF;
				border: 1px #e0d5d5 solid;
			}
		}
	}
</style>